<template>
  <div class="findDetail">
    <div class="header">
      <van-icon
        name="arrow-left"
        size="0.48rem"
        color="#999"
        @click="onClickLeft"
      />
    </div>
    <div class="content">
      <h3>{{ articleDetail.sort }}</h3>
      <p class="title">{{ articleDetail.title }}</p>
      <p class="subtitle">{{ articleDetail.subtitle }}</p>
      <div class="section" v-html="articleDetail.content"></div>
    </div>
    <Loading :isShow="show" />
  </div>
</template>

<script setup>
import { reqArticleDetail } from "@/api/discover";
import { useRoute } from "vue-router";
import { ref } from "vue";
import Loading from "@/components/loading.vue";
const route = useRoute();
const id = route.params.id;
let show = ref(true);
let articleDetail = ref("");
const onClickLeft = () => history.back();

const loadArticleDetail = async (id) => {
  const result = await reqArticleDetail({ id });
  console.log(result);
  if (result.code == 0) {
    articleDetail.value = result.data;
    show.value = false;
  }
};
loadArticleDetail(id);
</script>

<style scoped>
.header {
  width: 100%;
  height: 0.88rem;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 9;
  left: 0;
  box-shadow: 0 0 0.1rem #dedede;
  display: flex;
  align-items: center;
}
.content {
  margin-top: 0.3rem;
  font-size: 0.28rem;
  width: 6.8rem;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  padding-top: 0.8rem;
  box-sizing: border-box;
}
.content h3 {
  text-align: left;
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  color: #333;
  font-size: 0.32rem;
  margin: 0.3rem 0;
}
.content .title {
  text-align: left;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 0.56rem;
  color: #333;
}
.content .subtitle {
  margin: 0.48rem auto 0.48rem;
  font-family: PingFangSC-Light;
  font-size: 0.32rem;
  color: #898989;
  font-weight: 300;
  text-align: left;
  font-size: 12px;
}

::v-deep p {
  color: #666;
  margin: 0.2rem 0;
}
::v-deep img {
  width: 100%;
}
</style>
